//Tool:
(function (window,undefined) {
    var Tools = {//(类似Math对象)(不会去生成实例再去调用，而是直接调用方法)
        // 获取一个范围内的随机整数
        getRandom: function (min,max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        },
        //获取随机颜色的方法
        getCorlor : function () {
            //rgb(r,g,b) 三个色值的颜色，可以随机获取0-255之间的数字
            var r = this.getRandom(0,255)
            var g = this.getRandom(0,255)
            var b = this.getRandom(0,255)
            return `rgb(${r},${g},${b})`
        }
    }
    window.Tools = Tools;
})(window,undefined);
//Food:
(function (window,undefined) {
    ps = "absolute";
    function Food(option) {
        var option = option instanceof Object ? option : {};
        this.width = option.width || 20;
        this.height = option.height || 20;
        this.x = option.x;
        this.y = option.y;
        this.color = option.color || "gold";
        this.eles = []
    }

    Food.prototype.render = function (map) {
        var ele = document.createElement("div");
        ele.style.width = this.width + "px";
        ele.style.height = this.height + "px";
        this.x = Tools.getRandom(0,map.clientWidth / this.width - 1);
        this.y = Tools.getRandom(0,map.clientHeight / this.height - 1);
        ele.setAttribute("x",this.x)
        ele.setAttribute("y",this.y)
        ele.style.left = this.x * this.width + "px";
        ele.style.top =  this.y * this.height + "px";
        ele.style.backgroundColor = this.color;
        ele.style.position = ps;
        map.appendChild(ele);
        this.eles.push(ele)//一开始的时候创建ele你忘了吗T-T
    }

    Food.prototype.remove = function (i) {
        this.eles[i].remove();
        this.eles.splice(i,1)
    }
    window.Food = Food;
})(window,undefined);
//snack:
(function (window,undefined) {
    var ps = "absolute"
    function Snake(option) {
        var option = option instanceof Object ? option : {};
        this.width = option.width || 20;
        this.height = option.height || 20;
        this.body = [
            {x:1,y:2,color:"blue"},
            {x:2,y:2,color:"blue"},
            {x:3,y:2,color:"red"},
        ],
        this.direction = "down",
        this.eles = []
    }

    Snake.prototype.render = function (map) {
        for (var i = 0, len = this.body.length ; i < len; i++) {
            var ele = document.createElement("div");
            ele.style.width = this.width + "px";
            ele.style.height = this.height + "px";
            ele.style.left = this.body[i].x * this.width + "px";
            ele.style.top = this.body[i].y * this.height + "px";
            ele.style.backgroundColor = this.body[i].color;
            ele.style.position = ps;
            map.appendChild(ele);
            this.eles.push(ele)
        }
    }

    Snake.prototype.move = function () {
        for (var i = 0 ; i < this.body.length - 1 ; i++) {
            this.body[i].x = this.body[i + 1].x 
            this.body[i].y = this.body[i + 1].y 
        }
        var head = this.body[this.body.length - 1]
        switch (this.direction) {
            case "right":
                head.x++;
                break;
            case "left":
                head.x--;
                break;
            case "up":
                head.y--;
                break;
            case "down":
                head.y++;
        }
        this.render(map)
    }

    Snake.prototype.remove = function () {
        for (var i = this.eles.length - 1; i >= 0 ; i--) {
            this.eles[i].remove();
            eles = []
        }
    }
    window.Snake = Snake;
})(window,undefined);
//Game:
(function (window,undefined) {
    function Game(map) {
        this.food = new Food();
        this.snake = new Snake();
        this.map = map
    }

    Game.prototype.start = function () {
        //这里只需要渲染食物和蛇对象，var game = new Game(map)在main.js中执行
        this.food.render(this.map);
        this.food.render(this.map);
        this.food.render(this.map);
        this.snake.render(this.map);
        run(this);
        document.onkeydown = function (e) {
            switch (e.keyCode) {
                case 37:
                    this.snake.direction = "left";
                    break;
                case 38:
                    this.snake.direction = "up";
                    break;
                case 39:
                    this.snake.direction = "right";
                    break;
                case 40:
                    this.snake.direction = "down";
            }
        }.bind(this)
    }

    function run(context) {
        var timer = setInterval(function () {
            this.snake.move();
            this.snake.remove();
            this.snake.render(this.map);
            var head = this.snake.body[this.snake.body.length - 1], maxX = this.map.clientWidth / this.snake.width - 1,
            maxY = this.map.clientHeight / this.snake.height - 1,last = this.snake.body[0];
            if (head.x < 0 || head.y <0 || head.x > maxX || head.y > maxY) {
                clearInterval(timer)
                alert("game over")
            }            
            for (var i = 0 ; i < this.food.eles.length ; i++) {
                if (head.x == this.food.eles[i].getAttribute("x") && head.y == this.food.eles[i].getAttribute("y")) {
                    this.food.remove(i);
                    this.food.render(this.map);
                    this.snake.body.unshift({
                        x: last.x,
                        y: last.y,
                        color: last.color
                    });
                }
            }
        }.bind(context),200)
    }
    window.Game = Game;
})(window,undefined);
//main:
(function (window,undefined) {
    var map = document.getElementById("map")
    var game = new Game(map);
    game.start()
})(window,undefined)